<template>
    <view class="container">
            <!-- #ifdef H5 -->
            <view style="height: 15px"></view>
            <!-- #endif -->
            <block
				v-for="(item, index) in addressList"
				:key="index"
			>
                <!---u-cell
                    :isLink="true"
                    size="large"
                    rightIconStyle="font-size: 44rpx"
                >
                    <view class="cell-title" slot="title">
                        <view class="inline-block mr-30">
                            <u--text
                                text="Donald Castro"
                                size="32rpx"
                                bold
                            ></u--text>
                        </view>
                        <view class="inline-block mr-15">
                            <u--text
                                text="17786895661"
                                mode="phone"
                                format="encrypt"
                                size="32rpx"
                                bold
                            ></u--text>
                        </view>
                        <view class="badge">
                        </view>
                    </view>
                    <u--text
                        text="我是地址我是地址我是地址我是地址我是地址我是地"
                        size="24rpx"
                        color="#999999"
                        :lines="2"
                        slot="label"
                    ></u--text>
                </u-cell-->
                <address-item :item="item" @onTap="editAddress" :defaultAddressId="defaultAddressId"></address-item>
            </block>
        <view class="bottom">
            <u-button
                text="新建地址"
                class="custom-style"
                :customStyle="{
                    background: '#000000',
                    color: '#ffffff'
                }"
                @click="navigateTo('pages/saveAddress/index')"
            ></u-button>
        </view>
    </view>
</template>
<script>
import { getUserAddress, activitySubmitAddress, boxConfirmAddress } from "@/config/api"
import AddressItem from "@/components/AddressItem"
export default {
    components: {
        AddressItem
    },
    data() {
        return {
            addressList: [],
            select: null,
            activityResultId: null,
            blindBoxId: null
        }
    },
    onLoad(option) {
        this.select = option.select
        this.activityResultId = option.activityResultId
        this.blindBoxId = option.blindBoxId
    },
    onShow() {
        this.getData()
    },
    computed: {
        defaultAddressId() {
            return this.$store.getters.defaultAddressId
        }
    },
    methods: {
        navigateTo(path, params={}, type='navigateTo') {
            uni.$u.route({
				url: path,
				params,
                type
			})
        },
        async getData() {
            const res = await getUserAddress({custom: {auth: true}})
            this.addressList = res
        },
        async editAddress(res) {
            const params = {
                id: res.id,
                name: res.name,
                mobile: res.mobile,
                detail: res.detail,
                default: res.default
            }
            if (this.select && this.activityResultId){
                uni.showLoading({
                    title: '确认中'
                })
                await activitySubmitAddress({id: this.activityResultId, addressId: res.id})
                uni.hideLoading()
            } else if (this.select && this.blindBoxId) {
                uni.showLoading({
                    title: '确认中'
                })
                await boxConfirmAddress({id: this.blindBoxId, addressId: res.id})
                uni.hideLoading()
            } else if (this.select) {
                this.$store.dispatch("user/selectAddress", params)
            }
            this.navigateTo("pages/saveAddress/index", params, this.select? "navigateBack": "navigateTo")
        }
    }
}
</script>
<style lang="scss" scoped>
    .container {
        .cell-title {
            .inline-block {
                display: inline-block;
                margin-bottom: 5rpx;
                margin-top: 10rpx;
            }
            .mr-30 {
                margin-right: 30rpx;
            }
            .mr-15 {
                margin-right: 15rpx;
            }
            .badge {
                width: 70rpx;
                height: 32rpx;
                display: inline-block;
                text-align: center;
                line-height: 32rpx;
            }
        }
        .bottom {
            box-sizing: border-box;
            position: fixed;
            width: 100%;
            padding: 0 20rpx;
            bottom: 33rpx;
        }
        .custom-style {
            background: #000000;
            color: #ffffff;
        }
    }
</style>
